<template>
	<view v-if="load" style="padding-bottom: 60rpx;">
		<!-- backgroundColor:info.bg_color, -->
		<uni-head title="产品详情"></uni-head>
		<image :src="info.detail_img" mode="widthFix" class="bx-banner"></image>
		<view class="bx-card">
			<view class="bx-card-title">
				<text>{{info.name}}</text>
				<text class="bx-card-title-red" v-if="info.type_name">·{{info.type_name}}</text>
			</view>
			<view class="title_line"></view>

			<view class="btn_body">
				<view class="choose_btnt">选择投保时长</view>
				<view class="type_btn_body">
					<view class="type_btn" v-for="(item,index) in info.select_list" :key="index"
						:class="item.chooseTrue ? 'active_btn' : ''" @click="changeBtn(index)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="detail-table">
				<view class="detail-table-item" style="flex: 4.4;">
					<view class="detail-tab-item-line detail-tab-item-head">
						保障方案
					</view>
					<view class="detail-tab-item-line">
						<view class="detail-tab-item-bg">
							<view class="detail-tab-item-bg_top">
								平安产险意外伤害保险(C款)
							</view>
							<view class="detail-tab-item-bg_bottom">
								意外伤残身故和残疾
							</view>
						</view>
					</view>
					<view class="detail-tab-item-line">
						<view class="detail-tab-item-bg">
							<view class="detail-tab-item-bg_top">
								平安产险附加意外伤害医疗费用补偿保险
							</view>
							<view class="detail-tab-item-bg_bottom">
								意外住院和门急诊
							</view>
						</view>
					</view>
					<view class="detail-tab-item-line">
						<view class="detail-tab-item-bg">
							<view class="detail-tab-item-bg_top">
								平安产险附加意外伤害住院津贴保险
							</view>
							<view class="detail-tab-item-bg_bottom">
								意外住院津贴
							</view>
						</view>
					</view>
					<view class="detail-tab-item-line">
						<view class="detail-tab-item-bg" style="font-weight: normal;">
							保费
							<!-- <view class="detail-tab-item-bg_bottom">
								意外住院津贴
							</view> -->
						</view>
					</view>
				</view>
				<view class="detail-table-item detail-table-item-hover" v-for="(item, index) in chooseDta.fananlist"
					:key="index">
					<view class="detail-tab-item-line detail-tab-item-head">
						{{ chooseDta.fanan[item].name}}
					</view>
					<view class="detail-tab-item-line">
						{{ chooseDta.fanan[item].be.name }}
					</view>
					<view class="detail-tab-item-line">{{ chooseDta.fanan[item].ylfy.name }}</view>
					<view class="detail-tab-item-line">{{ chooseDta.fanan[item].ywjt.name }}</view>
					<view class="detail-tab-item-line">{{ chooseDta.fanan[item].price}}元</view>
				</view>
			</view>
		</view>
		<view class="bx-card" style="padding-bottom: 20rpx;">
			<view class="bx-card-title">
				<text>赔偿标准</text>
			</view>
			<view class="table-p-table_body">
				<view class="detail-table-p-table">
					<view class="detail-table-p-table-item1 blckColor">伤残等级</view>
					<view class="detail-table-p-table-item blckColor">10级</view>
					<view class="detail-table-p-table-item blckColor">9级</view>
					<view class="detail-table-p-table-item blckColor">8级</view>
					<view class="detail-table-p-table-item blckColor">7级</view>
					<view class="detail-table-p-table-item blckColor">6级</view>
					<view class="detail-table-p-table-item blckColor">5级</view>
					<view class="detail-table-p-table-item blckColor">4级</view>
					<view class="detail-table-p-table-item blckColor">3级</view>
					<view class="detail-table-p-table-item blckColor">2级</view>
					<view class="detail-table-p-table-item blckColor">1级</view>
				</view>
				<view class="detail-table-p-table detail-table-p-table-nb">
					<view class="detail-table-p-table-item1 blckColor2">赔偿限额比例</view>
					<view class="detail-table-p-table-item blckColor2 item_color">10%</view>
					<view class="detail-table-p-table-item blckColor2 item_color">20%</view>
					<view class="detail-table-p-table-item blckColor2 item_color">30%</view>
					<view class="detail-table-p-table-item blckColor2 item_color">40%</view>
					<view class="detail-table-p-table-item blckColor2 item_color">50%</view>
					<view class="detail-table-p-table-item blckColor2 item_color">60%</view>
					<view class="detail-table-p-table-item blckColor2 item_color">70%</view>
					<view class="detail-table-p-table-item blckColor2 item_color">80%</view>
					<view class="detail-table-p-table-item blckColor2 item_color">90%</view>
					<view class="detail-table-p-table-item blckColor2 item_color">100%</view>
				</view>
			</view>
			<view class="detail_title">
				<view>
					意外伤害住院津贴：意外伤害住院津贴日额为100元/天，免赔3天，单次事故限90天，全年累计以180天为限。
				</view>
				<view>
					医疗费用扣除100元部分按100%的比例给付意外伤害医疗保险金
				</view>
			</view>
		</view>
		<view class="detail_all_body">
			<view class="detail_all_body_title">具体详情</view>
			<view class="detail_all_body_d">
				<image class="detail_all_body_dimage" src="../../static/Icon/choose_true.png" mode="aspectFill"></image>
				<view class="detail_all_body_dtext">不限制光伏施工类别，高空、平地、山地以及水面作业都在保障范围</view>
			</view>
			<view class="detail_all_body_d">
				<image class="detail_all_body_dimage" src="../../static/Icon/choose_true.png" mode="aspectFill"></image>
				<view class="detail_all_body_dtext">保险理赔款经被保险人(身故需要其法定继承人)提供权益转让书，可转让到其
					授权的第三方账户内</view>
			</view>
			<view class="detail_all_body_d">
				<image class="detail_all_body_dimage" src="../../static/Icon/choose_true.png" mode="aspectFill"></image>
				<view class="detail_all_body_dtext">承保光伏发电行业的从业人员(16-65岁)，包括安装人员、运维人员、管理人
					员等等相关人员</view>
			</view>
		</view>
		<view class="bx-lines"></view>
		<view class="bx-footer">
			<view class="bx-footer-left" @tap="toHome()">
				<image src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/h5/tohome.png" class="bx-footer-icon"
					mode="widthFix"></image>
				<view class="bx-footer-left-txt">返回首页</view>
			</view>
			<view class="bx-footer-right" @tap="toForm()">立即投保</view>
		</view>
	</view>
</template>

<script>
	import uniHead from '@/components/uni-dead/head.vue';

	export default {
		components: {
			uniHead
		},
		data() {
			return {
				info: {},
				load: false,
				btn_choose: true,
				chooseDta: {}
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			changeBtn(index) {
				this.info.select_list.forEach((item) => {
					item.chooseTrue = false
				})
				this.info.select_list[index].chooseTrue = true
				this.chooseDta = this.info[this.info.select_list[index].value]
				this.$forceUpdate();
			},
			toForm() {
				uni.showModal({
					title: '重要提示',
					content: '尊敬的客户，您即将进入平安保险的产品投保流程。根据银监会[2020]26号的监管规定，为了维护您的权益，您在投保过程中的完整操作轨迹将被记录，请您仔细阅读条款、责任免除、特别约定等内容。',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							if (this.info.is_login == 0) {
								this.toast('请先登录');
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}, 1000);
								return;
							}
							uni.navigateTo({
								url: '/pages/bx/formgfu?id=' + this.info.id
							})
						}
					}
				});

			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				this.ajax('index/detail', {
					data: {
						id: 6
					},
					success: (res) => {
						this.info = res.msg;
						if(this.info.select_list.length>0){
							this.info.select_list[0].chooseTrue = true
							this.chooseDta = this.info[this.info.select_list[0].value]
						}else{
							this.chooseDta.fanan=this.info.fanan
							this.chooseDta.fananlist=this.info.fananlist
						}
						uni.hideLoading();
						this.load = true;
					}
				});
			},
			toHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	@import url("@/static/css/box/index-cdz.css");

	.title_line {
		width: 100%;
		height: 1px;
		background-color: #F4F4F4;
		margin-top: 30upx;
		margin-bottom: 40upx;
	}

	.btn_body {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.choose_btnt {
			font-size: 24rpx;
			color: #000000;
			line-height: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			white-space: nowrap;
		}

		.type_btn_body {
			// margin-top: 20rpx;
			display: flex;
			align-items: center;
		}

		.type_btn {
			width: 180rpx;
			height: 52rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999999;
			border: 1rpx solid #E6E6E6;
			cursor: pointer;
			font-size: 24rpx;
			margin-right: 20rpx;
		}

		.type_btn2 {
			margin-left: 20px;
			width: 180rpx;
			height: 52rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999999;
			border: 1rpx solid #E6E6E6;
			cursor: pointer;
			font-size: 24rpx;
		}

		.active_btn {
			border: 1rpx solid #5180F9;
			color: #FFFFFF;
			background-color: #5180F9;
		}
	}

	.detail-table {
		margin-top: 20rpx;
		display: flex;
	}

	.detail-table-item {
		flex: 1;
		border-left: none;
		cursor: pointer;

	}

	.detail-tab-item-line {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		position: relative;
		font-size: 20rpx;
		color: #000000;
		background-color: #F6F9FF;
		margin-bottom: 12rpx;
	}

	.detail-tab-item-head {
		background-color: #E9F3FF;
		color: #5180F9;
		font-weight: bold;
		font-size: 20rpx;
	}

	.detail-tab-item-bg {
		background-color: #F6F9FF;
		// color: #5180F9;
		width: 100%;
		position: absolute;
		top: 8rpx;
		font-weight: bold;
		font-size: 20rpx;
	}

	.detail-tab-item-bg_top {
		white-space: nowrap;
		color: #000000;
		height: 45rpx;
		line-height: 45rpx;
		font-weight: normal;
		font-size: 20rpx;
	}

	.detail-tab-item-bg_bottom {
		color: #999999;
		height: 25rpx;
		line-height: 16rpx;
		font-weight: normal;
		font-size: 20rpx;
	}

	.table-p-table_body {
		margin-top: 20rpx;
		font-size: 20rpx;
	}

	.detail-table-p-table {
		display: flex;
		border-top: 1rpx solid #E1EBFE;
		border-bottom: 1rpx solid #F6F9FF;
	}

	.detail-table-p-table-nb {
		border-top: none;
	}

	.blckColor {
		background-color: #E1EBFE;
	}

	.blckColor2 {
		background-color: #F6F9FF;
	}

	.detail-table-p-table-item1 {
		width: 130rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-right: 1rpx solid #E1EBFE;
		border-left: 1rpx solid #E1EBFE;
	}

	.detail-table-p-table-item {
		flex: 1;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-right: 1rpx solid #F6F9FF;
	}

	.item_color {
		border-right: 1rpx solid #E1EBFE;
	}

	.detail_title {
		margin-top: 18rpx;
		font-size: 20rpx;
		white-space: nowrap;
		line-height: 28rpx;
		height: 56rpx;
	}

	.detail_all_body {
		display: flex;
		flex-direction: column;
		margin: 18rpx;

		.detail_all_body_title {
			height: 28rpx;
			font-size: 24rpx;
			color: #000000;
			line-height: 28rpx;
			font-weight: 500;
		}

		.detail_all_body_d {
			display: flex;
			align-items: flex-start;
			margin-left: 4rpx;
			margin-top: 20rpx;
			width: 100%;
			.detail_all_body_dimage {
				width: 24rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
			
			.detail_all_body_dtext {
				width: calc(100% - 72rpx);
				font-size: 20rpx;
				line-height: 24rpx;
			}
		}
	}
</style>